<script lang="ts" setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';

import { HeaderRight } from './headerRight';

const emit = defineEmits(['navClick']);
const selectedKeys1 = ref(['eventMon']);
const route = useRoute();
const routeKeyMap: Record<string, string[]> = {
  '/eventMon': ['eventMon'],
  '/dataIntegration': ['dataIntegration'],
  '/zhihuiCloudMap': ['zhihuiCloudMap'],
  '/workspace/eventsystem': ['workspace']
};

selectedKeys1.value = routeKeyMap[route.path] || [];
const emitEvent = ({ key }) => {
  emit('navClick', { data: key });
};
</script>

<template>
  <a-layout-header class="header" :style="{ height: '70px' }">
    <div style="display: flex">
      <div class="logo">开源数据事件分析与评估平台</div>
      <a-menu
        theme="dark"
        mode="horizontal"
        v-model:selected-keys="selectedKeys1"
        :style="{ lineHeight: '70px' }"
        @click="emitEvent"
      >
        <a-menu-item key="eventMon">事件监测</a-menu-item>
        <a-menu-item key="dataIntegration">事件概览</a-menu-item>
        <a-menu-item key="zhihuiCloudMap">事件分析</a-menu-item>
        <a-menu-item key="workspace/eventsystem">工作台</a-menu-item>
        <a-menu-item key="system/user">系统配置</a-menu-item>
      </a-menu>
      <HeaderRight style="position: absolute; right: 35px" />
    </div>
  </a-layout-header>
</template>
<style scoped style="stylus">
.ant-layout-header {
  background-image: url('../assets/header.png');
  padding-inline: 36px;
  background-size: 100% 100%;
}
.logo {
  width: 520px;
  margin-right: 100px;
  line-height: 70px;
  opacity: 1;
  text-shadow: 0px 8px 8px rgba(0, 0, 0, 0.3);
  /** 文本1 */
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 0px;
  color: rgba(237, 246, 255, 1);
  text-align: justify;
  vertical-align: top;
  font-family: '优设标题黑';
}
.ant-menu-dark {
  background: transparent;
  font-size: 20px;
  color: #d9e7ff;
}
::v-deep(.ant-menu-dark) .ant-menu-item-selected {
  background: transparent !important;
  text-shadow: -2px 1px 6px rgba(26, 228, 255, 1);
}
</style>
